<template>
  <van-tabs @click="ChangeCateGoryListData" v-model="active">
    <van-tab v-for="item in brotherCategory" :title="item.name" :key="item.id">
      <div class="title_desc">
        <h2>{{ name }}</h2>
        <p>{{ frontDesc }}</p>
      </div>
      <!-- 产品列表 -->
      <ProductList :goodsList="goodsList" />
    </van-tab>
  </van-tabs>
</template>
<script>
import ProductList from "@/components/ProductList";
import { GetCateGoryData, GetCateGoryList } from "@/https/http";
export default {
  data() {
    return {
      active: 0, // 当前选中的类下标
      brotherCategory: [], // 分类数组
      goodsList: [], //当前类别对应的商品列表
      id: "", // 当前类别的id
      page: 1, // 当前页数
      size: 1000, //每页显示条数
      name: "", // 分类标题
      frontDesc: "", //该分类的文字描述
    };
  },
  components: {
    ProductList,
  },
  created() {
    //获取所有分类数据
    GetCateGoryData({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res);
      let { brotherCategory, currentCategory } = res.data;
      this.brotherCategory = brotherCategory; // 全部分类数组
      this.currentCategory = currentCategory; // 当前分类对象
      this.id = currentCategory.id.toString(); // 当前类别id
      this.name = currentCategory.name; // 当前类别name
      this.frontDesc = currentCategory.front_desc; // 当前类别文字描述
      this.brotherCategory.forEach((item, index) => {
        if (this.$route.query.id == item.id) {
          this.active = index; //  当前选中的类下标
        }
      });
      //调用获取当前类对应的产品数组
      this.GetCateGoryListData(this.id);
    });
  },
  methods: {
    ChangeCateGoryListData(title, name) {
      // 切换分类
      // title 下标
      // name: 分类标题
      console.log(title, name);
      this.active = title;
      this.name = name;
      this.brotherCategory.forEach((item) => {
        if (item.name == name) {
          this.frontDesc = item.front_desc;
          this.id = item.id.toString();
        }
      });
      //调用获取当前类对应的产品数组
      this.GetCateGoryListData(this.id);
    },
    GetCateGoryListData(id) {
      //获取当前类别对应的产品数组
      GetCateGoryList({
        categoryId: id,
        page: this.page,
        size: this.size,
      }).then((res) => {
        if (res.errno == 0) {
          this.goodsList = res.data.goodsList;
        }
      });
    },
  },
};
</script>
<style lang = "less" scoped>
.title_desc {
  text-align: center;
  h2 {
    font-size: 18px;
    height: 50px;
    line-height: 50px;
  }
  p {
    height: 30px;
    line-height: 30px;
    color: #666;
  }
}
</style>